import 'package:flutter/material.dart';
import 'package:flutter_study_app/module/model/financing_product.dart';
import 'package:flutter_study_app/module/view/select_group/select_group_view.dart';
import 'package:flutter_study_app/widget/my_app_bar.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class QuestionnaireCreatePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _QuestionnaireCreatePageState();
}

class _QuestionnaireCreatePageState extends State<QuestionnaireCreatePage> {
  List<FinancingProduct> _productList = [];
  late SelectGroupViewController _dutyController;
  bool _isDutyOther = false;

  @override
  void initState() {
    super.initState();
    _dutyController = SelectGroupViewController();
    _dutyController
        .addOnSelectItemListener((selectedList, isSingle, item, isSelected) {
      _isDutyOther = selectedList.contains("1");
      setState(() {});
    });
  }

  _buildGroupTitle({String title = "Title"}) {
    return Container(
      color: Color(0xFFF8F8F8),
      padding: EdgeInsets.only(top: 12.w, bottom: 12.w),
      child: Row(
        children: [
          Container(
            width: 4.w,
            height: 14.w,
            color: Color(0xFF009669),
          ),
          SizedBox(
            width: 8.w,
          ),
          Text(
            title,
            style: TextStyle(fontSize: 14.sp, color: Color(0xFF333333)),
          )
        ],
      ),
    );
  }

  _buildTitle(int number, String title, {String? type, bool isNeed = true}) {
    return Container(
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.only(top: 18.w, left: 12.w, right: 12.w),
      child: RichText(
        textAlign: TextAlign.left,
        text: TextSpan(
            text: '$number.',
            style: TextStyle(
                fontSize: 16.sp,
                color: Color(0xFF333333),
                fontWeight: FontWeight.w500),
            children: [
              //题目类型
              TextSpan(
                  text: type ?? '',
                  style: TextStyle(
                      fontSize: 16.sp,
                      color: Color(0xFF009669),
                      fontWeight: FontWeight.w500)),
              //标题
              TextSpan(
                  text: title,
                  style: TextStyle(
                      fontSize: 16.sp,
                      color: Color(0xFF333333),
                      fontWeight: FontWeight.w500)),
              TextSpan(
                  text: isNeed ? '*' : '',
                  style: TextStyle(fontSize: 16.sp, color: Colors.red))
            ]),
      ),
    );
  }

  _buildFinancingProductItemView(int index) {
    return Container(
      margin: EdgeInsets.only(left: 12.w, right: 12.w, top: 12.w),
      decoration: BoxDecoration(
          color: Color(0xFFF8F8F8), borderRadius: BorderRadius.circular(4.w)),
      padding: EdgeInsets.only(
        top: 12.w,
        bottom: 12.w,
      ),
      child: Column(
        children: [
          Row(
            children: [
              Container(
                width: 3.w,
                height: 14.w,
                color: Color(0xFF009669),
              ),
              SizedBox(
                width: 9.w,
              ),
              Text(
                '类目${index + 2}',
                style: TextStyle(
                    color: Color(0xFF333333),
                    fontSize: 14.sp,
                    fontWeight: FontWeight.w500),
              ),
              Spacer(),
              InkWell(
                onTap: () {
                  _productList.removeAt(index);
                  setState(() {});
                },
                child: Padding(
                  padding: EdgeInsets.only(left: 20.w, right: 12.w),
                  child: Row(
                    children: [
                      Image.asset(
                        'assets/images/ic_delete.png',
                        width: 16.w,
                        height: 16.w,
                      ),
                      SizedBox(
                        width: 3.w,
                      ),
                      Text(
                        '删除',
                        style: TextStyle(
                            color: Color(0xFFF94343), fontSize: 13.sp),
                      )
                    ],
                  ),
                ),
              )
            ],
          ),
          Container(
            alignment: Alignment.centerLeft,
            margin: EdgeInsets.only(
              left: 12.w,
              top: 12.w,
            ),
            child: Text(
              '融资银行',
              style: TextStyle(color: Color(0xFF333333), fontSize: 14.sp),
            ),
          ),
          Container(
            margin: EdgeInsets.only(
              left: 12.w,
              top: 8.w,
              right: 12.w,
            ),
            height: 40.w,
            padding: EdgeInsets.only(left: 10.w, right: 10.w),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(4.w),
              border: Border.all(width: 1.w, color: Color(0xFFD8D8D8)),
            ),
            child: InkWell(
              onTap: () {},
              child: Row(
                children: [
                  Expanded(
                      child: Text(
                    '请选择',
                    style: TextStyle(color: Color(0xFF999999), fontSize: 14.sp),
                  )),
                  Image.asset(
                    'assets/images/ic_arrow_down_gray.png',
                    width: 16.w,
                    height: 16.w,
                  )
                ],
              ),
            ),
          ),
          Container(
            alignment: Alignment.centerLeft,
            margin: EdgeInsets.only(
              left: 12.w,
              top: 12.w,
            ),
            child: Text(
              '产品名称',
              style: TextStyle(color: Color(0xFF333333), fontSize: 14.sp),
            ),
          ),
          Container(
            height: 40.w,
            margin: EdgeInsets.only(
              left: 12.w,
              top: 8.w,
              right: 12.w,
            ),
            alignment: Alignment.centerLeft,
            child: TextField(
              decoration: InputDecoration(
                isDense: true,
                contentPadding: EdgeInsets.all(10.w),
                hintText: '请输入',
                hintStyle: TextStyle(fontSize: 14.sp, color: Color(0xFF999999)),
                labelStyle:
                    TextStyle(fontSize: 14.sp, color: Color(0xFF333333)),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(4.w),
                  borderSide: BorderSide(width: 1.w, color: Color(0xFFD8D8D8)),
                ),
                focusedBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(4.w),
                    borderSide:
                        BorderSide(width: 1.w, color: Color(0xFF009669))),
                disabledBorder: InputBorder.none,
                enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(4.w),
                  borderSide: BorderSide(width: 1.w, color: Color(0xFFD8D8D8)),
                ),
              ),
            ),
          ),
          Container(
            alignment: Alignment.centerLeft,
            margin: EdgeInsets.only(
              left: 12.w,
              top: 12.w,
            ),
            child: Text(
              '担保方式',
              style: TextStyle(color: Color(0xFF333333), fontSize: 14.sp),
            ),
          ),
          Container(
            margin: EdgeInsets.only(left: 12.w, top: 8.w, right: 12.w),
            height: 40.w,
            padding: EdgeInsets.only(left: 10.w, right: 10.w),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(4.w),
              border: Border.all(width: 1.w, color: Color(0xFFD8D8D8)),
            ),
            child: InkWell(
              onTap: () {},
              child: Row(
                children: [
                  Expanded(
                      child: Text(
                    '请选择',
                    style: TextStyle(color: Color(0xFF999999), fontSize: 14.sp),
                  )),
                  Image.asset(
                    'assets/images/ic_arrow_down_gray.png',
                    width: 16.w,
                    height: 16.w,
                  )
                ],
              ),
            ),
          ),
          Offstage(
            offstage: false,
            child: Container(
              height: 40.w,
              margin: EdgeInsets.only(
                left: 12.w,
                right: 12.w,
                top: 8.w,
              ),
              alignment: Alignment.centerLeft,
              child: TextField(
                decoration: InputDecoration(
                  isDense: true,
                  contentPadding: EdgeInsets.all(10.w),
                  hintText: '请输入',
                  hintStyle:
                      TextStyle(fontSize: 14.sp, color: Color(0xFF999999)),
                  labelStyle:
                      TextStyle(fontSize: 14.sp, color: Color(0xFF333333)),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(4.w),
                    borderSide:
                        BorderSide(width: 1.w, color: Color(0xFFD8D8D8)),
                  ),
                  focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(4.w),
                      borderSide:
                          BorderSide(width: 1.w, color: Color(0xFF009669))),
                  disabledBorder: InputBorder.none,
                  enabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(4.w),
                    borderSide:
                        BorderSide(width: 1.w, color: Color(0xFFD8D8D8)),
                  ),
                ),
              ),
            ),
          ),
          Container(
            alignment: Alignment.centerLeft,
            margin: EdgeInsets.only(
              left: 12.w,
              top: 10.w,
            ),
            child: Text(
              '融资银行金额',
              style: TextStyle(color: Color(0xFF333333), fontSize: 14.sp),
            ),
          ),
          Container(
            height: 40.w,
            margin: EdgeInsets.only(
              left: 12.w,
              top: 8.w,
              right: 12.w,
            ),
            alignment: Alignment.centerLeft,
            child: TextField(
              keyboardType: TextInputType.number,
              decoration: InputDecoration(
                isDense: true,
                contentPadding: EdgeInsets.all(10.w),
                hintText: '请输入',
                hintStyle: TextStyle(fontSize: 14.sp, color: Color(0xFF999999)),
                labelStyle:
                    TextStyle(fontSize: 14.sp, color: Color(0xFF333333)),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(4.w),
                  borderSide: BorderSide(width: 1.w, color: Color(0xFFD8D8D8)),
                ),
                focusedBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(4.w),
                    borderSide:
                        BorderSide(width: 1.w, color: Color(0xFF009669))),
                disabledBorder: InputBorder.none,
                enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(4.w),
                  borderSide: BorderSide(width: 1.w, color: Color(0xFFD8D8D8)),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  _buildFinancingProductListView() {
    return ListView.builder(
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        itemCount: _productList.length,
        itemBuilder: (context, index) {
          return _buildFinancingProductItemView(index);
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: MyAppBar(
          title: '问卷创建',
        ),
        body: Column(
          children: [
            Expanded(
                child: SingleChildScrollView(
              child: Container(
                color: Colors.white,
                child: Column(
                  children: [
                    Container(
                      margin: EdgeInsets.only(bottom: 16.w),
                      height: 8.w,
                      color: Color(0xFFF8F8F8),
                    ),
                    Text(
                      '走访信息问卷',
                      style: TextStyle(
                          fontSize: 21.sp,
                          color: Color(0xFF333333),
                          fontWeight: FontWeight.w500),
                    ),
                    Container(
                      margin: EdgeInsets.only(
                          left: 12.w, right: 12.w, top: 16.w, bottom: 16.w),
                      child: Text(
                        '为了给您提供更好的服务，希望您能抽出几分钟时间，将您的感受和建议告诉我们，我们非常重视每位用户的宝贵意见，期待您的参与！现在我们就马上开始吧！',
                        textAlign: TextAlign.justify,
                        style: TextStyle(
                            fontSize: 14.sp, color: Color(0xFF333333)),
                      ),
                    ),
                    _buildGroupTitle(title: '基础信息'),
                    _buildTitle(1, '走访日期'),
                    Container(
                      margin:
                          EdgeInsets.only(left: 12.w, right: 12.w, top: 12.w),
                      height: 40.w,
                      padding: EdgeInsets.only(left: 10.w, right: 10.w),
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(4.w),
                        border:
                            Border.all(width: 1.w, color: Color(0xFFD8D8D8)),
                      ),
                      child: InkWell(
                        onTap: () {},
                        child: Row(
                          children: [
                            Expanded(
                                child: Text(
                              '请选择日期',
                              style: TextStyle(
                                  color: Color(0xFF999999), fontSize: 14.sp),
                            )),
                            Image.asset(
                              'assets/images/ic_arrow_down_gray.png',
                              width: 16.w,
                              height: 16.w,
                            )
                          ],
                        ),
                      ),
                    ),
                    _buildTitle(2, '走访对象'),
                    Container(
                      height: 40.w,
                      margin:
                          EdgeInsets.only(left: 12.w, right: 12.w, top: 12.w),
                      alignment: Alignment.centerLeft,
                      child: TextField(
                        decoration: InputDecoration(
                          isDense: true,
                          contentPadding: EdgeInsets.all(10.w),
                          hintText: '请输入',
                          hintStyle: TextStyle(
                              fontSize: 14.sp, color: Color(0xFF999999)),
                          labelStyle: TextStyle(
                              fontSize: 14.sp, color: Color(0xFF333333)),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(4.w),
                            borderSide: BorderSide(
                                width: 1.w, color: Color(0xFFD8D8D8)),
                          ),
                          focusedBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(4.w),
                              borderSide: BorderSide(
                                  width: 1.w, color: Color(0xFF009669))),
                          disabledBorder: InputBorder.none,
                          enabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(4.w),
                            borderSide: BorderSide(
                                width: 1.w, color: Color(0xFFD8D8D8)),
                          ),
                        ),
                      ),
                    ),
                    _buildTitle(3, '对接人职务', type: '【单选】'),
                    SelectGroupView(
                      controller: _dutyController,
                      optionList: ['财务负责人', '其他'],
                      valueList: ['0', '1'],
                      padding: EdgeInsets.only(
                          top: 12.w, bottom: 8.w, left: 12.w, right: 12.w),
                    ),
                    Offstage(
                      offstage: !_isDutyOther,
                      child: Container(
                        height: 40.w,
                        margin: EdgeInsets.only(
                          left: 12.w,
                          right: 12.w,
                        ),
                        alignment: Alignment.centerLeft,
                        child: TextField(
                          decoration: InputDecoration(
                            isDense: true,
                            contentPadding: EdgeInsets.all(10.w),
                            hintText: '请输入',
                            hintStyle: TextStyle(
                                fontSize: 14.sp, color: Color(0xFF999999)),
                            labelStyle: TextStyle(
                                fontSize: 14.sp, color: Color(0xFF333333)),
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(4.w),
                              borderSide: BorderSide(
                                  width: 1.w, color: Color(0xFFD8D8D8)),
                            ),
                            focusedBorder: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(4.w),
                                borderSide: BorderSide(
                                    width: 1.w, color: Color(0xFF009669))),
                            disabledBorder: InputBorder.none,
                            enabledBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(4.w),
                              borderSide: BorderSide(
                                  width: 1.w, color: Color(0xFFD8D8D8)),
                            ),
                          ),
                        ),
                      ),
                    ),
                    _buildTitle(4, '企业发展阶段', type: '【多选】'),
                    SelectGroupView(
                      isSingleSelect: false,
                      optionList: [
                        '已具备一定规模拟拓展产业链相关业务',
                        '其他',
                        '已具备一定规模拟拓展产业链相关业务已具备一定规模拟拓展产业链相关业务'
                      ],
                      valueList: ['0', '1', '2'],
                    ),
                    _buildGroupTitle(title: '企业金融信息'),
                    _buildTitle(5, '是否有银行融资', type: '【单选】'),
                    SelectGroupView(
                      optionList: ['是', '否'],
                      valueList: ['0', '1'],
                    ),
                    _buildTitle(
                      6,
                      '请填写银行融资产品情况',
                    ),
                    //类目1
                    Container(
                      margin:
                          EdgeInsets.only(left: 12.w, right: 12.w, top: 12.w),
                      decoration: BoxDecoration(
                          color: Color(0xFFF8F8F8),
                          borderRadius: BorderRadius.circular(4.w)),
                      padding:
                          EdgeInsets.only(top: 12.w, bottom: 12.w, right: 12.w),
                      child: Column(
                        children: [
                          Row(
                            children: [
                              Container(
                                width: 3.w,
                                height: 14.w,
                                color: Color(0xFF009669),
                              ),
                              SizedBox(
                                width: 9.w,
                              ),
                              Text(
                                '类目1',
                                style: TextStyle(
                                    color: Color(0xFF333333),
                                    fontSize: 14.sp,
                                    fontWeight: FontWeight.w500),
                              )
                            ],
                          ),
                          Container(
                            alignment: Alignment.centerLeft,
                            margin: EdgeInsets.only(
                              left: 12.w,
                              top: 12.w,
                            ),
                            child: Text(
                              '融资银行',
                              style: TextStyle(
                                  color: Color(0xFF333333), fontSize: 14.sp),
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(left: 12.w, top: 8.w),
                            height: 40.w,
                            padding: EdgeInsets.only(left: 10.w, right: 10.w),
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(4.w),
                              border: Border.all(
                                  width: 1.w, color: Color(0xFFD8D8D8)),
                            ),
                            child: InkWell(
                              onTap: () {},
                              child: Row(
                                children: [
                                  Expanded(
                                      child: Text(
                                    '请选择',
                                    style: TextStyle(
                                        color: Color(0xFF999999),
                                        fontSize: 14.sp),
                                  )),
                                  Image.asset(
                                    'assets/images/ic_arrow_down_gray.png',
                                    width: 16.w,
                                    height: 16.w,
                                  )
                                ],
                              ),
                            ),
                          ),
                          Container(
                            alignment: Alignment.centerLeft,
                            margin: EdgeInsets.only(
                              left: 12.w,
                              top: 10.w,
                            ),
                            child: Text(
                              '融资银行金额',
                              style: TextStyle(
                                  color: Color(0xFF333333), fontSize: 14.sp),
                            ),
                          ),
                          Container(
                            height: 40.w,
                            margin: EdgeInsets.only(left: 12.w, top: 8.w),
                            alignment: Alignment.centerLeft,
                            child: TextField(
                              keyboardType: TextInputType.number,
                              decoration: InputDecoration(
                                isDense: true,
                                contentPadding: EdgeInsets.all(10.w),
                                hintText: '请输入',
                                hintStyle: TextStyle(
                                    fontSize: 14.sp, color: Color(0xFF999999)),
                                labelStyle: TextStyle(
                                    fontSize: 14.sp, color: Color(0xFF333333)),
                                border: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(4.w),
                                  borderSide: BorderSide(
                                      width: 1.w, color: Color(0xFFD8D8D8)),
                                ),
                                focusedBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(4.w),
                                    borderSide: BorderSide(
                                        width: 1.w, color: Color(0xFF009669))),
                                disabledBorder: InputBorder.none,
                                enabledBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(4.w),
                                  borderSide: BorderSide(
                                      width: 1.w, color: Color(0xFFD8D8D8)),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    _buildFinancingProductListView(),
                    Padding(
                      padding: EdgeInsets.all(12.w),
                      child: InkWell(
                        onTap: () {
                          _productList.add(FinancingProduct());
                          setState(() {});
                        },
                        child: Container(
                          height: 40.w,
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(2.w),
                            border: Border.all(
                              color: Color(0xFFD8D8D8),
                            ),
                          ),
                          child: Row(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Image.asset(
                                'assets/images/ic_add.png',
                                width: 16.w,
                                height: 16.w,
                              ),
                              SizedBox(
                                width: 5.w,
                              ),
                              Text(
                                '继续填写',
                                style: TextStyle(
                                    fontSize: 14.sp, color: Color(0xFF009669)),
                              )
                            ],
                          ),
                        ),
                      ),
                    ),
                    Container(
                      height: 12.w,
                      color: Color(0xFFF8F8F8),
                    ),
                    _buildTitle(
                      7,
                      '对我们的工作有什么建议？',
                      isNeed: false,
                    ),
                    Container(
                      color: Colors.white,
                      height: 100.w,
                      padding: EdgeInsets.only(
                          left: 12.w, right: 12.w, top: 12.w, bottom: 16.w),
                      child: TextField(
                        maxLines: 4,
                        scrollPadding: EdgeInsets.zero,
                        textAlign: TextAlign.start,
                        decoration: InputDecoration(
                          isDense: true,
                          isCollapsed: true,
                          contentPadding: EdgeInsets.all(10.w),
                          hintText: '请输入',
                          hintStyle: TextStyle(
                              fontSize: 14.sp, color: Color(0xFF999999)),
                          labelStyle: TextStyle(
                              fontSize: 14.sp, color: Color(0xFF333333)),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(4.w),
                            borderSide: BorderSide(
                                width: 1.w, color: Color(0xFFD8D8D8)),
                          ),
                          focusedBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(4.w),
                              borderSide: BorderSide(
                                  width: 1.w, color: Color(0xFF009669))),
                          enabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(4.w),
                            borderSide: BorderSide(
                                width: 1.w, color: Color(0xFFD8D8D8)),
                          ),
                        ),
                      ),
                    ),
                    Container(
                      height: 12.w,
                      color: Color(0xFFF8F8F8),
                    ),
                    Padding(
                      padding: EdgeInsets.only(
                          left: 12.w, right: 12.w, top: 16.w, bottom: 16.w),
                      child: Text(
                        '特别提醒：对于明确有股权需求并需要制定商业计划书，或已有商业计划书但尚未最终确定券商、律所、会计师事务所的企业每周汇总上报省行对应条线，省行条线报同业投行团队。',
                        style: TextStyle(
                            color: Color(0xFF333333), fontSize: 14.sp),
                      ),
                    ),
                    Container(
                      height: 20.w,
                      color: Color(0xFFF8F8F8),
                    ),
                  ],
                ),
              ),
            )),
            SafeArea(
              child: Container(
                padding: EdgeInsets.all(12.w),
                width: double.infinity,
                height: 74.w,
                color: Colors.white,
                child: TextButton(
                  style: ButtonStyle(
                    backgroundColor:
                        MaterialStateProperty.all(Color(0xff009868)),
                  ),
                  onPressed: () {},
                  child: Text(
                    '提交',
                    style: TextStyle(color: Colors.white, fontSize: 18.sp),
                  ),
                ),
              ),
            ),
          ],
        ));
  }

  @override
  void dispose() {
    _dutyController.dispose();
    super.dispose();
  }
}
